<template>
  <div class="cbtnA" @click="handleClick">
    <p :style="{ fontSize: `${props.fontSize}`, color: `${props.color}` }">
      {{ props.title }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { msgbox } from "@/utils/msgboxutils";

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: "按钮",
  },
  func: {
    type: Function,
    required: false,
    default: () => {},
  },
  fontSize: {
    type: String,
    required: false,
    default: "18px",
  },
  color: {
    type: String,
    required: false,
    default: "#a3a3a3",
  },
});
const handleClick = (_: MouseEvent) => {
  props.func();
  msgbox.success(`${props.title} 被按下！`);
};
</script>

<style scoped lang="scss">
.cbtnA {
  // @include rel_cen_hw(25px, auto);
  @include relative_hw(auto, auto);
  p {
    // font-size: 18px;
    // color: #a3a3a3;
    letter-spacing: 0;
    transition: letter-spacing 0.3s ease, transform 0.2s ease;
    white-space: nowrap; // 禁止换行
  }
  &:hover {
    cursor: pointer;
    p {
      letter-spacing: 1px; /* 悬浮时增加字间距 */
    }
  }
  &:active {
    p {
      transform: scale(0.95); /* 按下时缩小 */
      letter-spacing: 0px;
    }
  }
}
</style>
